import React, { Component, createRef } from 'react'
import { Form, Input, Button, Space, message } from 'antd'
import { UserOutlined, SafetyCertificateOutlined } from '@ant-design/icons'
import { withRouter } from 'react-router-dom'
import Cap from '../../component/Captcha'
import req from '../../http/req'
import url from '../../config/url'
class MobileForm extends Component {
  state = {
    key: '',
    time: 60, //按钮上倒计时的时间
    isSend: false //按钮一开始是不可以点的
  }
  capRef = createRef()
  sendRef = createRef()
  timer = null
  render() {
    return (
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true
        }}
        style={{ width: 350 }}
        onFinish={this.onFinish}
        // 在form上绑定一个函数，获取手机号和图形验证码的值
        ref={this.sendRef}
      >
        <Form.Item
          name="mobile"
          rules={[
            {
              required: true,
              // 手机号正则的规则
              pattern: /^1[3-9]\d{9}$/,
              message: '请输入合法的手机号!'
            }
          ]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="手机号"
          />
        </Form.Item>

        <Form.Item
          name="captcha"
          rules={[
            {
              required: true,
              message: '请输入图形验证码'
            }
          ]}
        >
          <Space size="middle">
            <Input
              prefix={
                <SafetyCertificateOutlined className="site-form-item-icon" />
              }
              type="type"
              placeholder="图形验证码"
            />
            <Cap h={32} ref={this.capRef} saveKey={this.saveKey} />
          </Space>
        </Form.Item>
        <Form.Item
          name="code"
          rules={[
            {
              required: true,
              message: '请输入短信验证码'
            }
          ]}
        >
          <Space size="middle">
            <Input
              prefix={
                <SafetyCertificateOutlined className="site-form-item-icon" />
              }
              type="type"
              placeholder="短信验证码"
            />
            {/* disabled:禁用状态，不等于60的时候是禁用的 */}
            <Button
              block
              onClick={this.sendCode}
              disabled={this.state.time !== 60}
            >
              {this.state.time === 60
                ? '获取验证码'
                : `重新获取(${this.state.time})s`}
            </Button>
          </Space>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            block
            disabled={!this.state.isSend}
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    )
  }
  saveKey = (key) => {
    this.setState({ key })
  }
  // 登录成功的信息
  onFinish = (values) => {
    // 这里需要把验证码和手机号获取到
    const res = this.sendRef.current.getFieldsValue(['mobile', 'code'])
    // 在res里追加requestID
    res.requestId = this.state.requestId
    // 发送请求
    req
      .post(url.MobileUrl, res)
      .then((res) => {
        // 请求成功
        if (res.data.errNo === 0) {
          // 发送成功
          message.success('登录成功', 2, () => {
            // 跳转到首页
            this.props.history.push('/dashboard')
          })
        } else {
          // 发送失败
          message.error(res.data.errText)
          // 刷新验证码
          this.capRef.current.loadCaptcha()
          // 按钮设置回去
          this.setState({ isSend: false })
        }
      })
      .catch((e) => {})
  }

  // 短信的发送
  sendCode = () => {
    // validateFileds表示验证指定的表单项
    // validateFileds是异步方法，验证失败会抛异常，验证成功会返回表单项的值
    this.sendRef.current.validateFields(['mobile', 'captcha']).then((res) => {
      // 获取表单中手机号和图形验证码的数据
      const { mobile, captcha } = res
      // console.log(res);
      // 验证图形验证码
      req
        .post(url.CapVerUrl, { key: this.state.key, captcha })
        .then((rest) => {
          // 如果图形验证码验证成功，再去发送请求，请求短信验证码
          if (rest.data.errNo === 0) {
            // 下发短信验证码
            req
              .post(url.SendMoUrl, {
                token: rest.data.context.token,
                mobile,
                type: 0
              })
              .then((ret) => {
                // 短信验证发送成功
                if (ret.data.errNo === 0) {
                  // 保存短信中的requestID
                  this.setState({
                    requestId: ret.data.requestId,
                    // 把登录按钮的状态改成可选
                    isSend: true
                  })
                  //开始倒计时
                  this.timedown()
                  // 提示下发成功
                  message.success('短信下发成功')
                } else {
                  // 短信发送失败
                  // 提示消息
                  message.error(ret.data.errText)
                  // 刷新验证码
                  this.capRef.current.loadCaptcha()
                }
              })
          } else {
            // 图形验证码验证失败
            // 提示消息
            message.error(rest.data.errText)
            // // 刷新验证码
            this.capRef.current.loadCaptcha()
          }
        })
        .catch((e) => {})
    })
  }

  // 倒计时的函数
  timedown = () => {
    // 如果这个时间是0的话，重新设置好时间是60
    if (this.state.time === 0) {
      this.setState({ time: 60 })
    } else {
      // 不是0的话，按钮不可以点。time中的数逐次-1，事件是1秒
      this.setState({
        time: this.state.time - 1
      })
      this.timer = setTimeout(() => {
        this.timedown()
      }, 1000)
    }
  }
  // 清除定时器的副作用
  componentWillUnmount() {
    clearTimeout(this.timer)
  }
}

export default withRouter(MobileForm)
